<template>
  <div id="project">
    <div class="wrapper">
      <top-bar></top-bar>
      <top-header></top-header>
      <div class="main">
        <div class="main-content">
          <div class="content-lf">
            <div class="avatar-box">
              <el-carousel :interval="3000"
                           height="160px"
                           v-loading="loading">
                <el-carousel-item v-for="(item, index) in imageUrls"
                                  :key="index"
                                  class="avatar-img">
                  <a class=""
                     href="javascript:;"
                     :style="{backgroundImage: 'url('+ item.url + ')'}"></a>
                </el-carousel-item>
              </el-carousel>
              <span class="lv-icon"
                    :class="getLv(information.levelName)"></span>
            </div>
            <p class="content-plan">
              <span class="project-icon el-icon-document"></span>
              项目计划详情
              <!-- <span class="check-files">查看文件 》</span> -->
              <a v-if="information.planUrl"
                 class="check-files"
                 :href="information.planUrl.url">查看文件 》</a>
            </p>
            <table class="info-table"
                   style="border-collapse:collapse;">
              <tr>
                <td>订单信息</td>
              </tr>
              <tr>
                <td>{{ information.orderInfo }}</td>
              </tr>
            </table>
          </div>
          <div class="content-rg">
            <p class="rg-title">
              项目信息
            </p>
            <table class="project-table">
              <thead>
                <tr>
                  <td class="item-name">项目名称</td>
                  <td class="item-lv">项目等级</td>
                  <td class="item-state">项目阶段</td>
                  <td class="item-style">项目类型</td>
                  <td class="item-score">项目总分值</td>
                  <td class="item-date"
                      v-show="item.title"
                      v-for="(item,index) in information.projectTimes"
                      :key="index">{{item.title?item.title:'--'}}</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ information.projectName }}</td>
                  <td>{{ information.levelName }}级</td>
                  <td>{{ information.phaseName }}</td>
                  <td>{{ information.typeName }}</td>
                  <td>{{ information.totalScore }}</td>
                  <td v-show="item.title"
                      style="font-size: 12px;"
                      v-for="(item,index) in information.projectTimes"
                      :key="index"> {{ getTimes(item.startTime, item.endTime) }}</td>
                </tr>
              </tbody>
            </table>
            <table class="project-table">
              <thead>
                <tr>
                  <td class="change-time">最新需求变更日期</td>
                  <td>最新变更内容</td>
                  <td class="change-tips">备注</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ getTime(information.changeDate) }}</td>
                  <td>{{ information.changeContent }}</td>
                  <td>{{ information.remark }}</td>
                </tr>
              </tbody>
            </table>
            <p class="rg-title">
              任务汇总
            </p>
            <table class="project-table">
              <thead>
                <tr>
                  <td class="item-name">任务总数</td>
                  <td>超速完成任务</td>
                  <td>正常完成任务</td>
                  <td>延期完成任务</td>
                  <td>有异常的任务</td>
                  <td>未完成任务</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ information.totalTask }}</td>
                  <td>
                    <span class="plane-icon"></span>{{ information.overSpeedTask }}</td>
                  <td>
                    <span class="car-icon"></span>{{ information.normalTask }}</td>
                  <td>
                    <span class="human-icon"></span>{{ information.delayTask }}</td>
                  <td>
                    <span class="warn-icon"></span>{{ information.abnormalTask }}</td>
                  <td>
                    <span class="err-icon"></span>{{ information.unfinishedTask }}</td>
                </tr>
              </tbody>
            </table>
            <p class="rg-title">
              英雄战况
            </p>
            <table class="project-table">
              <thead>
                <tr>
                  <td class="team-name">项目组别</td>
                  <td class="team-member">成员名称</td>
                  <td class="team-place">成员角色</td>
                  <td class="team-state">负责部件及状态</td>
                  <td>目标分值</td>
                  <td>获得分值</td>
                  <td class="team-earn">奖金</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in information.staffList"
                    :key="index"
                    v-if="information.staffList">
                  <td>{{ item.groupName }}</td>
                  <td>{{ item.staffName }}</td>
                  <td>{{ getRole(item.roleCode) }}</td>
                  <td>
                    <div v-for="(list, index) in item.partArr"
                         :key="index">
                      <p class="state-list">{{ list.partsName }}
                        <span class="status-icon el-icon-caret-bottom"
                              :class="getCorlor(list.partsStatusCode)"></span>{{ getStatus(list.partsStatusCode) }}
                      </p>
                    </div>
                  </td>
                  <td>
                    <div v-for="(list, index) in item.partArr"
                         :key="index">{{ list.targetScore }}</div>
                  </td>
                  <td>
                    <div v-for="(list, index) in item.partArr"
                         :key="index">{{ list.getScore }}</div>
                  </td>
                  <td>
                    <div v-for="(list, index) in item.partArr"
                         :key="index">{{ list.getScore*10}}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <bottom-tab class="bottom-bar"></bottom-tab>
  </div>
</template>

<script>
import topBar from '@/components/top-bar'
import topHead from '@/components/top-head'
import bottomTab from '@/components/bottom-tab'

let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");

    export default {
        components: {
			'top-bar': topBar,
			'top-header': topHead,
			'bottom-tab': bottomTab
		},
        data() {
            return {
                loading: true,
                id: null,
                stateArr: [],
                imageUrls: [
                    {
                        url: ''
                    }
                ],
                information: {
                    imageUrls: [],
                    levelName: '',
                    projectTimes: [],
                    changeDate: '',
                    staffList: [],
                    planUrl: {
                        url: ''
                    }
                }
            }
        },
        watch: {
            information: function() {
                // console.log(this.information)
                this.imageUrls = this.information.imageUrls
            }
        },
        mounted() {
            this.id  = this.$router.currentRoute.query.id;
            if(this.id){
                this.getDetail(); 
            }
            this.getDictArr()
        },
        methods: {
            getDetail(){
                let url = CONSTANT.URL.PROJECTS.GETPROJECTBYID;
                let data = {
                    id:this.id
                }
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    let info = res.data.bussData 
                    this.information = {
                        id: info.id,
                        imageUrls: info.imageUrls,
                        levelName: info.levelName,
                        orderInfo: info.orderInfo,
                        phaseName: info.phaseName,
                        typeName: info.typeName,
                        totalScore: info.totalScore,
                        isImportant: info.isImportant,
                        projectName: info.projectName,
                        changeDate: info.changeDate,
                        changeContent: info.changeContent,
                        remark: info.remark,
                        projectTimes: info.projectTimes,
                        totalTask: info.totalTask,
                        overSpeedTask: info.overSpeedTask,
                        normalTask: info.normalTask,
                        delayTask: info.delayTask,
                        abnormalTask: info.abnormalTask,
                        unfinishedTask: info.unfinishedTask,
                        staffList: info.staffDTOList,
                        groupName: info.groupName,
                        planUrl: info.planUrl
                    }
                    // console.log(this.information.staffList)
                    this.deleteRepeat(this.information.staffList)
                    this.loading = false
                })
            },
            getDictArr(){
                let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY;
                let data = {} ;
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    this.stateArr = res.data.bussData.partsStatus
                })
            },
            getLv(level) {
                switch (level) {
                    case 'A':
                    return 'lv-a'
                    break;
                    case 'B':
                    return 'lv-b'
                    break;
                    case 'C':
                    return 'lv-c'
                    break;
                    case 'D':
                    return 'lv-d'
                    break;
                    case 'S':
                    return 'lv-s'
                    break;
                }
            },
            getRole(code) {
                switch (code) {
                    case 401:
                    return '主攻 | 项目组长'
                    break;
                    case 402:
                    return '助攻 | 结构工程师'
                    break;
                    case 403:
                    return '助攻 | 电子工程师'
                    break;
                    case 404:
                    return '助攻 | 外观设计师'
                    break;
                    case 405:
                    return '绘图师'
                    break;
                    case 406:
                    return '测试工程师'
                    break;
                }
            },
            getTool(code) {
                switch (code) {
                    case 501:
                        return 'AUTOCAD'
                        break;
                    case 502:
                        return 'CREO'
                        break;
                    case 503:
                        return 'Altium Designer'
                        break;
                    case 504:
                        return 'Rhinoceros 5'
                        break;
                    case 505:
                        return 'Photoshop CS4'
                        break;
                    case 506:
                        return 'Adobe Illustrator'
                        break;
                    case 507:
                        return 'KeyShot 4'
                        break;
                    case 508:
                        return 'Corel DRAW'
                        break;
                    default:
                        break;
                }  
            },
            getCorlor(code) {
                switch (code) {
                    case 701:
                        return 'red'
                        break;
                    case 702:
                        return 'gray'
                        break;
                    case 703:
                        return 'orange'
                        break;
                    case 704:
                        return 'cyan'
                        break;
                    case 705:
                        return 'blue'
                        break;
                    case 706:
                        return 'brown'
                        break;
                    case 707:
                        return 'green'
                        break;
                    case 708:
                        return 'yellow'
                        break;
                    case 709:
                        return 'purple'
                        break;
                    case 710:
                        return 'yellow-light'
                        break;
                    case 711:
                        return 'cyan'
                        break;
                    case 712:
                        return 'blue'
                        break;
                    case 713:
                        return 'brown'
                        break;
                    case 714:
                        return 'purple-dark'
                        break;
                    default:
                        break;
                }  
            },
            getStatus(code) {
                let str;
                this.stateArr.map((item)=>{
                    if(item.key == code){
                        str = item.value
                    }
                })
                return str;
            },
            getTime(time) {
              if (time === '1970-01-01 00:00:00') return '近期无变更'
				      else return time.slice(0, 10)
            },
            getTimes(start, end) {
              if (start === end) { return '近期无变更' }
              else { return start.slice(0, 10) + '至' + end.slice(0, 10) }
            },
            deleteRepeat (arr) {
                let arr1 = []
                arr.forEach((item)=>{
                    item.partArr = [];
                    item.partArr.push({
                        partsName:item.partsName,
                        partsStatusCode:item.partsStatusCode,
                        targetScore:item.targetScore,
                        getScore:item.getScore
                    })
                })
                arr.map((item,index)=>{
                    arr.forEach((list,num)=>{
                        if(index!=num&&item.userId == list.userId){
                            if(list.partArr.length){
                                item.partArr.push(list.partArr[0])
                            }
                        }
                    })
                })
                arr.forEach((item)=>{
                    let state = true;
                    arr1.map((list)=>{
                        if(item.userId == list.userId){
                            state = false
                        }
                    })
                    if(state){
                        arr1.push(item)
                    }
                })
               this.information.staffList = arr1;
            }   
        },
        computed: {
          staffListArr: function () {
            console.log(this.information.staffList)
            let arr = this.information.staffList.filter((ele, index, self) => self.indexOf(ele.staffName) === index)
            return arr
            console.log(arr)
          }
        }
    }
</script>

<style scoped>
#project {
    position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
tbody td div{
    border-bottom: 1px solid #ddd;
}

tbody td div:last-child{
    border: 0px;
}
.wrapper {
    min-height: calc(100vh - 210px);
	padding-bottom: 210px;
    background-color: rgba(245,245,245,1);
}
.bottom-bar {
	position: relative;
    left: 0;
    bottom: 0;
    margin-top: -210px;
    clear: both;
}
.main {
    padding-top: 30px;
    padding-bottom: 60px;
}
.main-content {
    width: 1200px;
    padding: 20px 20px;
    margin: 0 auto;
    background:rgba(255,255,255,1);
    display: flex;
    justify-content: space-between;
}
.content-lf {
    width: 260px;
}
.avatar-box {
    width: 260px;
    height: 160px;
    position: relative;
}
.avatar-box .avatar-img {
    width: 260px;
    height: 160px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.avatar-box .avatar-img a {
    width: 260px;
    height: 160px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
}
.avatar-box .lv-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 35px;
    height: 35px;
    z-index: 2;
}
.lv-a {
    background: url(../../assets/lv_a.png) no-repeat 100% 100%;
    background-size: cover;
}
.lv-b {
    background: url(../../assets/lv_b.png) no-repeat 100% 100%;
    background-size: cover;
}
.lv-c {
    background: url(../../assets/lv_c.png) no-repeat 100% 100%;
    background-size: cover;
}
.lv-d {
    background: url(../../assets/lv_d.png) no-repeat 100% 100%;
    background-size: 100% 100%;
}
.lv-s {
    background: url(../../assets/lv_s.png) no-repeat 100% 100%;
    background-size: cover;
}

.content-plan {
    margin-top: 10px;
    margin-bottom: 20px;
    height: 32px;
    line-height: 32px;
    font-size:18px;
    position: relative;
}
.content-plan .project-icon {
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    color: #F8B62B;
}
.content-plan .check-files {
    text-decoration: none;
    position: absolute;
    top: 5px;
    right: 0;
    font-size:14px;
    color:rgba(153,153,153,1);
    cursor: pointer;
}
.info-table td {
    border: 1px solid #ddd;
    font-size: 14px;
    width:260px;
    height:40px;
    line-height: 40px;
    text-align: center;
}
.info-table tr:first-of-type {
    background:rgba(195,24,31,1);
    color: #ffffff;
}


.rg-title {
    height:18px;
    line-height: 18px;
    font-size:18px;
    padding-left: 10px;
    color:rgba(195,24,31,1);
    border-left: 2px solid rgba(195,24,31,1);
}
.project-table {
    border-collapse:collapse;
    width: 878px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
.project-table td {
    border: 1px solid #ddd;
    height: 40px;
    line-height: 40px;
    font-size:14px;
}
.project-table thead td {
    background:rgba(248,182,43,1);
    color: #ffffff;
}
.project-table .item-name {
    width: 140px;
}
.project-table .item-lv {
    width: 80px;
}
.project-table .item-state {
    width: 100px;
}
.project-table .item-style {
    width: 100px;
}
.project-table .item-score {
    width: 100px;
}
.project-table .item-date, 
.project-table .item-time {
    width: 175px;
}
.project-table .change-time {
    width: 140px;
}
.project-table .change-tips {
    width: 450px;
}
.plane-icon {
    display: inline-block;
    width:30px;
    height:18px;
    vertical-align: middle;
    margin-right: 10px;
    background: url(../../assets/plane_icon.png) no-repeat 100% 100%;
    background-size: cover;
}
.car-icon {
    display: inline-block;
    width:43px;
    height:14px;
    vertical-align: middle;
    margin-right: 10px;
    background: url(../../assets/car_icon.png) no-repeat 100% 100%;
    background-size: cover;
}
.human-icon {
    display: inline-block;
    width:18px;
    height:29px;
    vertical-align: middle;
    margin-right: 10px;
    background: url(../../assets/human_icon.png) no-repeat 100% 100%;
    background-size: cover;
}
.warn-icon {
    display: inline-block;
    width:25px;
    height:21px;
    vertical-align: middle;
    margin-right: 10px;
    background: url(../../assets/warn_icon.png) no-repeat 100% 100%;
    background-size: cover;
}
.err-icon {
    display: inline-block;
    width:24px;
    height:24px;
    vertical-align: middle;
    margin-right: 10px;
    background: url(../../assets/err_icon.png) no-repeat 100% 100%;
    background-size: cover;
}
.team-name {
    width: 124px;
}
.team-member {
    width: 92px;
}
.team-place {
    width: 160px;
}
.team-earn {
    width: 90px;
}
.status-icon {
    font-size: 24px;
    vertical-align: middle;
}
.red {
    color: rgba(255,0,0,1);
}
.gray {
    color: rgb(184, 181, 181);
}
.orange {
    color: rgba(247,150,70,1);
}
.cyan {
    color: rgba(155,187,89,1);
}
.blue {
    color: rgba(0,112,192,1);
}
.brown {
    color: rgba(149,55,53,1);
}
.green {
    color: rgba(0,176,80,1);
}
.yellow {
    color: rgba(255,255,0,1);
}
.yellow-light {
    color: rgba(255,192,0,1);
}
.purple {
    color: rgba(96,74,123,1);
}
.purple-dark {
    color: rgba(112,48,160,1);
}
</style>